<template>
  <div class="set-dictionary">
    <div class="title">目录</div>
    <div
      class="chapter"
      v-for="(item, index) in toc"
      :key="index"
      @click="goChapter(item.href)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
  import EventEmitter from '@/utils';

  export default {
    props: {
      toc: {
        type: Array,
        default: [],
      },
    },
    methods: {
      goChapter(href) {
        EventEmitter.emit('setGoChapter', href);
      }
    },
  }
</script>

<style lang="scss" scoped>
@import '@/assets/style/global.scss';

// 公共样式
@mixin commonStyle {
  line-height: 2.5;
  padding-left: px2rem(20);
}

.set-dictionary {
  overflow-x: auto;
  width: 80%;
  height: 100%;
  background-color: #fff;
  .title {
    font-size: px2rem(40);
    @include commonStyle;
  }
  .chapter {
    border-top: 1px solid #bbb;
    @include commonStyle;
  }
}
</style>